<template>
  <div class="page">
    <div class="search-header">
      <div class="back" @click="goBack"></div>
      <div class="search" @click="search">请输入宝贝名称</div>
    </div>
    <div class="goods-main">
      <div ref="scroll-classify" class="classify-wrap">
        <div>
          <div ref="items" @click="selectItem(item)" class='classify-item' :class="{active:item.active}"
               v-for="item in classifys" :key="item.cid">
            {{item.title}}
          </div>
        </div>
      </div>
      <div class='goods-content'>
        <router-view></router-view>
      </div>
    </div>
    <my-search :show="showSearch"></my-search>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { classifyData } from 'api/goods'
import MySearch from 'components/MySearch'

export default {
  name: 'classify',
  data () {
    return {
      showSearch: { show: false },
      classifys: []
    }
  },
  methods: {
    search () {
      this.showSearch.show = true
      document.documentElement.style.height = '100%'
      document.body.style.height = '100%'
      document.body.style.overflow = 'hidden'
    },
    goBack () {
      this.$router.go(-1)
    },
    selectItem (selected) {
      // 标记当前选项
      this.classifys.forEach((item, index) => {
        this.classifys[index].active = false
        if (selected.cid === item.cid) {
          this.classifys[index].active = true
          selected.index = index
          this.$set(this.classifys, index, this.classifys[index])
        }
      })
      // 跳转页面
      this.$router.replace({
        name: 'classifyItem',
        query: { 'cid': selected.cid }
      })
      //点击的选项
      if (this.$refs['items']) {
        let top = this.$refs['items'][0].offsetHeight * selected.index
        let wrapHeight = this.$refs['scroll-classify'].offsetHeight
        let bottomHeight = parseInt(this.$refs['scroll-classify'].scrollHeight - top)
        if (top > parseInt(wrapHeight / 3) && bottomHeight > wrapHeight) {
          this.scrollTo(-top)
        }
      }
    },
    getClassifyData () {
      classifyData().then(res => {
        if (res.code === 200) {
          this.classifys = res.data
          this.classifys.forEach((item, index) => {
            this.classifys[index].active = false
            if (this.cid) {
              if (item.cid === this.cid) {
                this.selectItem(item)
              }
            } else {
              this.selectItem(this.classifys[0])
            }
          })
        }
      })
    },
    initScroll () {
      document.title = this.$route.meta.title
      this.scrollClassify = new BScroll(this.$refs['scroll-classify'], {
        click: true,
      })
    },
    refreshScroll () {
      setTimeout(function () {
        this.scrollClassify && this.scrollClassify.refresh()
      }.bind(this), 300)
    },
    destoryScroll () {
      this.scrollClassify && this.scrollClassify.destroy()
    },
    scrollTo (position) {
      this.scrollClassify && this.scrollClassify.scrollTo(0, position, 1000)
    },
  },
  created () {
    this.cid = this.$route.query.cid
    this.getClassifyData()

  },
  mounted () {
    this.initScroll()
    window.addEventListener('resize', this.refreshScroll)
  },
  beforeDestroy () {
    this.destoryScroll()
  },
  watch: {
    // classifys () {
    //   this.refreshScroll();
    // }
  },
  components: {
    MySearch
  },

}
</script>
<style lang="scss" scoped>
  .page {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .search-header {
    width: 100%;
    height: 1rem;
    background: #FFFFFF;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    border-bottom: 1px solid #EFEFEF;

    .back {
      width: 0.8rem;
      height: 0.8rem;
      background-image: url("../../../assets/images/home/goods/back.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .search {
      width: 80%;
      height: 0.69rem;
      border: solid 1px #B2B2B2;
      border-radius: 0.1rem;
      font-size: 0.28rem;
      color: #626262;
      line-height: 0.69rem;
      padding-left: 0.2rem;
    }
  }

  .goods-main {
    width: 100%;
    height: 92.5vh;
    display: flex;
    display: -webkit-flex;

    .classify-wrap {
      width: 1.72rem;
      height: 100%;
      overflow: hidden;
      margin-right: 3%;
      position: relative;
      z-index: 1;

      .classify-item {
        width: 100%;
        height: 0.8rem;
        border-bottom: 1px solid #EFEFEF;
        background-color: #FFFFFF;
        font-size: 0.28rem;
        text-align: center;
        line-height: 0.8rem;
        overflow: hidden;

        &.active {
          color: #ff0000
        }
      }
    }

    .goods-content {
      width: 71%;
      height: 100%;
    }
  }
</style>
